<template>
    <div :class="cns">
        <ph-scroll class="ph-tabbar-scroll">
            <div v-stv="idx==active" 
                :class="['ph-tabbar-item',idx==active?'ph-active':'']" v-for="(tab,idx) in tabs" :key="idx">
                <ph-button type="transparent" @click="shiftTab(tab.action,idx)">{{tab.title}}</ph-button>
                <ph-icon icon="close" :hover="true" @click="removeTab(idx)"/>
            </div>
        </ph-scroll>
        <div class="ph-action-zone">
            <ph-dropdown shape="square" icon="caret-down" type="transparent" :showRightIcon="false" @action="onAction" :disabled="!tabs.length">
                <ph-dropdown-item action="reload" icon="refresh">重新加载</ph-dropdown-item>
                <ph-dropdown-item action="close" icon="times-circle-o">关闭当前</ph-dropdown-item>
                <ph-dropdown-item action="closeOther" icon="times-circle-o">关闭其他</ph-dropdown-item>
                <ph-dropdown-item action="closeAll" icon="times-circle-o">关闭全部</ph-dropdown-item>
            </ph-dropdown>
            <!-- <ph-button shape="square" icon="bars" type="transparent"/> -->
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, computed, inject, Ref } from 'vue'
import { PhButton, PhIcon } from '../base'
import { PhDropdown,PhDropdownItem } from '../dropdown'
import { PhScrollToView } from '../../directives'
import { PhScroll } from '../scroll'
import storage from '../../shared/local-storage'
interface ITab {
    icon?:string,
    action?:string,
    title:string
}
const LOCAL_KEY = "ph_tabs"
export default defineComponent({
    directives:{stv:PhScrollToView},
    props:{
        theme:{
            type:String,
        },
        type:{
            type:String,
            default:"card"
        }
    },
    components:{
        PhScroll,
        PhButton,
        PhIcon,
        PhDropdown,
        PhDropdownItem
    },
    setup(props,{emit}) {
        const topTheme = inject<Ref<string>>("theme")
        const initTabs = ()=>{
            return (storage.getItem(LOCAL_KEY,true)||[]) as ITab[]
        }
        const tabs = ref<ITab[]>(initTabs())  
        const active = ref(-1)
        const cns = computed(()=>{
            const cns = ["ph-tabbar"]
            const theme = (props.theme||topTheme?.value)==="dark"?"dark":"light"
            if(theme)cns.push('ph-tabbar-'+theme)
            if(props.type)cns.push('ph-tabbar-'+props.type)
            return cns
        })
        const search = (action:string)=>{
            if(!tabs.value.length)return -1
            return tabs.value.findIndex(t=>t.action===action)
        }
        const addTab = (tab:ITab)=>{
            const idx = search(tab.action as string)
            if(idx<0)
                tabs.value.push(tab)
            active.value = idx<0?tabs.value.length-1:idx
            storage.setItem(LOCAL_KEY,tabs.value)
        }
        const removeTab = (idx:number)=>{
            emit('close',tabs.value[idx]);
            tabs.value.splice(idx,1)
            storage.setItem(LOCAL_KEY,tabs.value)
            if(idx>active.value)return
            if(idx<active.value)return active.value--
            if(!tabs.value[idx])active.value = idx-1
            const ntab = tabs.value[active.value]
            if(ntab)emit('shift',ntab.action)
        }
        const shiftTab = (action:string,idx:number)=>{
            emit('shift',action)
            active.value = idx
        }
        const onAction = (action:string)=>{
            if(!tabs.value.length)return
            switch(action){
                case "reload":
                    emit('reload',tabs.value[active.value].action)
                    break
                case "close":
                    removeTab(active.value)
                    break
                case "closeOther":
                    tabs.value = [tabs.value[active.value]]
                    active.value = 0
                    storage.setItem(LOCAL_KEY,tabs.value)
                    emit('closeOther')
                    break
                case "closeAll":
                    clearTabs()
            }
        }
        const clearTabs = ()=>{
            tabs.value = []
            active.value = -1
            storage.setItem(LOCAL_KEY,[])
            emit('closeAll')
        }
        return {cns,tabs,active,addTab,removeTab,shiftTab,onAction,clearTabs}
    },
})
</script>
<style lang="scss">
.ph-tabbar{
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: var(--ph-8) 0 var(--ph-8) var(--ph-15);
    width: 100%;
    
    position: relative;
    z-index: 2;
    font-size: var(--ph-tabbar-item-fs);
    --ph-tabbar-item-br:0;
    &-dark{
        --ph-tabbar-bg:var(--ph-dark);
        --ph-tabbar-c:var(--ph-c-l2);
        --ph-tabbar-item-bg:var(--ph-dark-l2);
        --ph-tabbar-item-bg-hover:var(--ph-dark-l1);
        --ph-tabbar-item-bg-active:var(--ph-dark);
        --ph-tabbar-item-bd:var(--ph-c);
    }
    &-light{
        --ph-tabbar-bg:var(--ph-light-light);
        --ph-tabbar-c:var(--ph-c);
        --ph-tabbar-item-bg:var(--ph-light-l1);
        --ph-tabbar-item-bg-hover:var(--ph-light-l2);
        --ph-tabbar-item-bg-active:var(--ph-light-light);
        --ph-tabbar-item-bd:var(--ph-light);
    }
    &-transparent{
        --ph-tabbar-bg:var(--ph-light-light);
        --ph-tabbar-c:var(--ph-c);
        --ph-tabbar-item-bg:var(--ph-light-light);
        --ph-tabbar-item-bg-hover:var(--ph-light-l2);
        --ph-tabbar-item-bg-active:var(--ph-light-l1);
        --ph-tabbar-item-bd:transparent;
    }
    &-card{
        --ph-tabbar-item-br:4px 4px 0 0;
    }
    .ph-action-zone{
        display: flex;
        align-items: center;
        padding-left: 2px;
        justify-content: right;
        & > .ph-action,
        .ph-drowdown-handle{
            &:hover{
                background-color: var(--ph-tabbar-item-bg-hover);
            }
            border-radius: 4px;
        }
        & > *{
            column-gap: var(--ph-5);
        }
    }
    .ph-tabbar-scroll{
        .ph-scroll-zone{
            flex: 1;
            display: flex;
            overflow: auto;
            flex-wrap: nowrap;
            border-radius: var(--ph-tabbar-item-br);
            position: relative;
        }
    }
    .ph-tabbar-item{
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        border:1px solid var(--ph-tabbar-item-bd);
        padding: 0 var(--ph-8);
        border-radius: var(--ph-tabbar-item-br);
        transition: background-color .3s ease;
        &:not(:first-child){
            margin-left: -1px;
        }
        .ph-action{
            padding: var(--ph-tabbar-item-padding);
        }
        .ph-icon{
            transform: scale(.8);
        }
        background-color: var(--ph-tabbar-item-bg);
        &:hover{
            background-color: var(--ph-tabbar-item-bg-hover);
        }
        &.ph-active{
            background-color: var(--ph-tabbar-item-bg-active);
            border-bottom-color: transparent;
        }
    }
    background-color: var(--ph-tabbar-bg);
    color: var(--ph-tabbar-c);
    // border-top: 1px solid var(--ph-dark-l1);
}
</style>
